<template>
  <div>
    <!-- 创建按钮 -->
    <el-button type="primary" @click="openCreateDialog">创建辅导计划</el-button>

    <!-- 表格显示辅导计划 -->
    <el-table :data="tutoringPlans" style="width: 100%" border>
      <el-table-column prop="planId" label="计划ID" width="180"></el-table-column>
      <el-table-column prop="studentName" label="学生姓名" width="180"></el-table-column>
      <el-table-column prop="planName" label="计划名称" width="180"></el-table-column>
      <el-table-column prop="goal" label="目标" width="180"></el-table-column>
      <el-table-column prop="progress" label="进展" width="180"></el-table-column>
      <el-table-column prop="startDate" label="开始日期" width="180">
        <template slot-scope="scope">
          {{ formatDate(scope.row.startDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="endDate" label="结束日期" width="180">
        <template slot-scope="scope">
          {{ formatDate(scope.row.endDate) }}
        </template>
      </el-table-column>

      <!-- 操作按钮 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="openEditDialog(scope.row)" size="mini" type="warning">编辑</el-button>
          <el-button @click="deleteTutoringPlan(scope.row.planId)" size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建/编辑 辅导计划的弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :title="isEdit ? '编辑辅导计划' : '创建辅导计划'">
      <el-form :model="form" label-width="100px">
        <el-form-item label="计划名称">
          <el-input v-model="form.planName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生ID">
          <el-input v-model="form.studentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="目标">
          <el-input v-model="form.goal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="进展">
          <el-input v-model="form.progress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="form.startDate" type="date" placeholder="选择开始日期" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker v-model="form.endDate" type="date" placeholder="选择结束日期" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTutoringPlan">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tutoringPlans: [], // 存储辅导计划列表
      form: {
        planId: null,
        studentId:'',
        planName: '',
        goal: '',
        progress: '',
        startDate: '',
        endDate: ''
      },
      dialogVisible: false, // 控制弹窗显示
      isEdit: false, // 是否为编辑状态
    };
  },
  mounted() {
    this.fetchTutoringPlans(); // 组件加载时获取辅导计划
  },
  methods: {
    // 获取所有辅导计划
    fetchTutoringPlans() {
      axios.get('http://localhost:9000/tutoring-plans')
          .then(response => {
            this.tutoringPlans = response.data;
          })
          .catch(error => {
            console.error("获取辅导计划失败", error);
          });
    },

    // 打开创建辅导计划的弹窗
    openCreateDialog() {
      this.isEdit = false;
      this.form = { planId: null, planName: '', goal: '', progress: '', startDate: '', endDate: '' };
      this.dialogVisible = true;
    },

    // 打开编辑辅导计划的弹窗
    openEditDialog(tutoringPlan) {
      this.isEdit = true;
      this.form = { ...tutoringPlan }; // 填充表单数据
      this.dialogVisible = true;
    },

    // 保存辅导计划（创建或更新）
    saveTutoringPlan() {
      if (this.isEdit) {
        this.updateTutoringPlan();
      } else {
        this.createTutoringPlan();
      }
    },

    // 创建辅导计划
    createTutoringPlan() {
      axios.post('http://localhost:9000/tutoring-plans', this.form)
          .then(response => {
            this.$message.success('辅导计划创建成功');
            this.fetchTutoringPlans(); // 重新获取辅导计划列表
            this.dialogVisible = false;
          })
          .catch(error => {
            console.error("创建辅导计划失败", error);
          });
    },

    // 更新辅导计划
    updateTutoringPlan() {
      axios.put(`http://localhost:9000/tutoring-plans/${this.form.planId}`, this.form)
          .then(response => {
            this.$message.success('辅导计划更新成功');
            this.fetchTutoringPlans(); // 重新获取辅导计划列表
            this.dialogVisible = false;
          })
          .catch(error => {
            console.error("更新辅导计划失败", error);
          });
    },

    // 删除辅导计划
    deleteTutoringPlan(planId) {
      axios.delete(`http://localhost:9000/tutoring-plans/${planId}`)
          .then(response => {
            this.$message.success('辅导计划删除成功');
            this.fetchTutoringPlans(); // 重新获取辅导计划列表
          })
          .catch(error => {
            console.error("删除辅导计划失败", error);
          });
    },

    // 格式化日期显示
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return d.toISOString().split('T')[0]; // 格式化为 yyyy-MM-dd
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
